<template>
  <div class="studentcontainer" v-if="studentdetailprop!=null">
    <!--学员信息框-->
    <el-dialog
      :visible.sync="isShow"
      custom-class="el-dialog-bg"
      :close-on-click-modal="modalclose"
      :before-close="handleClose"
    >
      <div slot="title" class="panel_title">学员信息</div>
      <div class="studetailinfo">
        <div class="dialog">
          <div class="topPanel">
            <div class="leftStudentInfo">
              <div class="headPic">
                <img :src="studentdetailprop.photo" />
              </div>
              <div class="studentName">{{studentdetailprop.realName}}</div>
              <div class="studentAge">
                <span>{{studentdetailprop.age}}</span>
                <span v-if="studentdetailprop.genderMode==1">男</span>
                <span v-if="studentdetailprop.genderMode==2">女</span>
              </div>
              <div class="studentParent">
                <div class="item contentEllipsis">
                  <span>
                    联&nbsp;&nbsp;系&nbsp;&nbsp;人：
                    <span
                      v-if="studentdetailprop.studentParentEntityList&&studentdetailprop.studentParentEntityList.length>0"
                      :title="studentdetailprop.studentParentEntityList[0].parentName"
                      class="spanlabelassist"
                    >{{studentdetailprop.studentParentEntityList[0].parentName}}</span>
                  </span>
                </div>
                <div class="item">
                  <span style="letter-spacing: 0.1px;">
                    关&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;系：
                    <span
                      class="spanlabelassist"
                      v-if="studentdetailprop.studentParentEntityList&&studentdetailprop.studentParentEntityList.length>0 && studentdetailprop.studentParentEntityList[0].parentMode==1"
                    >父亲</span>
                    <span
                      class="spanlabelassist"
                      v-else-if="studentdetailprop.studentParentEntityList&&studentdetailprop.studentParentEntityList.length>0 && studentdetailprop.studentParentEntityList[0].parentMode==2"
                    >母亲</span>
                    <span
                      class="spanlabelassist"
                      v-else-if="studentdetailprop.studentParentEntityList&&studentdetailprop.studentParentEntityList.length>0 && studentdetailprop.studentParentEntityList[0].parentMode==3"
                    >爷爷/外公</span>
                    <span
                      class="spanlabelassist"
                      v-else-if="studentdetailprop.studentParentEntityList&&studentdetailprop.studentParentEntityList.length>0 && studentdetailprop.studentParentEntityList[0].parentMode==4"
                    >奶奶/外婆</span>
                    <span
                      class="spanlabelassist"
                      v-else-if="studentdetailprop.studentParentEntityList&&studentdetailprop.studentParentEntityList.length>0 && studentdetailprop.studentParentEntityList[0].parentMode==5"
                    >其他</span>
                  </span>
                </div>
                <div class="item">
                  <span style="letter-spacing: 0.5px;">
                    联系电话：
                    <span
                      v-if="studentdetailprop.studentParentEntityList&&studentdetailprop.studentParentEntityList.length>0"
                      class="spanlabelassist"
                    >{{studentdetailprop.studentParentEntityList[0].phone}}</span>
                  </span>
                </div>
              </div>
            </div>
            <div class="rightCourseInfo">
              <div class="courseTypeInfo">
                <div class="courseType" ref="finishCourse" @click="finishCourse">
                  <div class="coursetypename">
                    <span>已结课</span>
                  </div>
                  <div class="coursenum">{{finishcourse.finishnum}}</div>
                </div>
                <div class="courseType" ref="dropCourse" @click="dropCourse">
                  <div class="coursetypename">
                    <span>已退课</span>
                  </div>
                  <div class="coursenum">{{dropcourse.finishnum}}</div>
                </div>
                <div class="courseType courseTypeActive" ref="attendCourse" @click="attendCourse">
                  <div class="coursetypename">
                    <span>上课中</span>
                  </div>
                  <div class="coursenum">{{attendcourse.finishnum}}</div>
                </div>
                <div class="courseType" ref="waitCourse" @click="waitCourse">
                  <div class="coursetypename">
                    <span>待开课</span>
                  </div>
                  <div class="coursenum">{{waitcourse.finishnum}}</div>
                </div>
              </div>
              <div class="courseInfo">
                <!--已结课-->
                <el-row style="border-top:none;" v-if="finishShow">
                  <div class="tablecss">
                    <table style="width:100%;" border="0" cellpadding="0" cellspacing="0">
                      <thead style="display: block;">
                        <tr>
                          <th style="width:2.2rem;">课程名称</th>
                          <th style="width:2.5rem;">开课时间</th>
                          <th style="width:1.3rem;">课程进度</th>
                          <th style="width:0.8rem;">签</th>
                          <th style="width:0.8rem;">假</th>
                          <!-- <th style="width:0.7rem;">迟</th> -->
                          <th style="width:0.8rem;">补</th>
                          <th style="width:0.8rem;">旷</th>
                        </tr>
                      </thead>
                      <tbody
                        style="display: block;max-height:0.66rem;"
                        v-if="finishcourse.courselist.length>0"
                      >
                        <tr v-for="li in finishcourse.courselist">
                          <td style="width:2.2rem;" align="center">{{li.courseName}}</td>
                          <td style="width:2.5rem;" align="center">{{li.startTime}}</td>
                          <td
                            style="width:1.3rem;"
                            align="center"
                          >{{li.useCourseHour||0}}/{{li.totalHour||0}}</td>
                          <td style="width:0.8rem;" align="center">{{li.siginTimes||0}}</td>
                          <td style="width:0.8rem;" align="center">{{li.leaveTimes}}</td>
                          <!-- <td style="width:0.7rem;" align="center">{{li.lateTimes}}</td> -->
                          <td style="width:0.8rem;" align="center">{{li.makeupTimes}}</td>
                          <td style="width:0.8rem;" align="center">{{li.absentTimes}}</td>
                        </tr>
                      </tbody>
                      <tbody v-else>
                        <tr>
                          <td colspan="10" align="center">暂无数据</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </el-row>
                <!--待开课-->
                <el-row style="border-top:none;" v-if="waitShow">
                  <div class="tablecss">
                    <table style="width:100%;" border="0" cellpadding="0" cellspacing="0">
                      <thead style="display: block;">
                        <tr>
                          <th style="width:2.2rem;">课程名称</th>
                          <th style="width:2.5rem;">开课时间</th>
                          <th style="width:1.3rem;">课程进度</th>
                          <th style="width:0.8rem;">签</th>
                          <th style="width:0.8rem;">假</th>
                          <!-- <th style="width:0.7rem;">迟</th> -->
                          <th style="width:0.8rem;">补</th>
                          <th style="width:0.8rem;">旷</th>
                        </tr>
                      </thead>
                      <tbody
                        style="display: block;max-height:0.66rem;"
                        v-if="waitcourse.courselist.length>0"
                      >
                        <tr v-for="li in waitcourse.courselist">
                          <td style="width:2.2rem;" align="center">{{li.courseName}}</td>
                          <td style="width:2.5rem;" align="center">{{li.startTime}}</td>
                          <td
                            style="width:1.3rem;"
                            align="center"
                          >{{li.useCourseHour||0}}/{{li.totalHour||0}}</td>
                          <td style="width:0.8rem;" align="center">{{li.siginTimes||0}}</td>
                          <td style="width:0.8rem;" align="center">{{li.leaveTimes}}</td>
                          <!-- <td style="width:0.7rem;" align="center">{{li.lateTimes}}</td> -->
                          <td style="width:0.8rem;" align="center">{{li.makeupTimes}}</td>
                          <td style="width:0.8rem;" align="center">{{li.absentTimes}}</td>
                        </tr>
                      </tbody>
                      <tbody v-else>
                        <tr>
                          <td colspan="10" align="center">暂无数据</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </el-row>
                <!--上课中-->
                <el-row style="border-top:none;" v-if="attendShow">
                  <div class="tablecss">
                    <table style="width:100%;" border="0" cellpadding="0" cellspacing="0">
                      <thead style="display: block;">
                        <tr>
                          <th style="width:2.2rem;">课程名称</th>
                          <th style="width:2.5rem;">开课时间</th>
                          <th style="width:1.3rem;">课程进度</th>
                          <th style="width:0.8rem;">签</th>
                          <th style="width:0.8rem;">假</th>
                          <!-- <th style="width:0.7rem;">迟</th> -->
                          <th style="width:0.8rem;">补</th>
                          <th style="width:0.8rem;">旷</th>
                        </tr>
                      </thead>
                      <tbody
                        style="display: block;max-height:0.66rem;"
                        v-if="attendcourse.courselist.length>0"
                      >
                        <tr v-for="li in attendcourse.courselist">
                          <td style="width:2.2rem;" align="center">{{li.courseName}}</td>
                          <td style="width:2.5rem;" align="center">{{li.startTime}}</td>
                          <td
                            style="width:1.3rem;"
                            align="center"
                          >{{li.useCourseHour||0}}/{{li.totalHour||0}}</td>
                          <td style="width:0.8rem;" align="center">{{li.siginTimes||0}}</td>
                          <td style="width:0.8rem;" align="center">{{li.leaveTimes}}</td>
                          <!-- <td style="width:0.7rem;" align="center">{{li.lateTimes}}</td> -->
                          <td style="width:0.8rem;" align="center">{{li.makeupTimes}}</td>
                          <td style="width:0.8rem;" align="center">{{li.absentTimes}}</td>
                        </tr>
                      </tbody>
                      <tbody v-else>
                        <tr>
                          <td colspan="10" align="center">暂无数据</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </el-row>
                <!--已退课-->
                <el-row style="border-top:none;" v-if="dropShow">
                  <div class="tablecss">
                    <table style="width:100%;" border="0" cellpadding="0" cellspacing="0">
                      <thead style="display: block;">
                        <tr>
                          <th style="width:2.3rem;">课程名称</th>
                          <th style="width:2.3rem;">开课时间</th>
                          <th style="width:2.3rem;">已上课时</th>
                          <th style="width:2.3rem;">退课日期</th>
                        </tr>
                      </thead>
                      <tbody
                        style="display: block;max-height:0.66rem;"
                        v-if="dropcourse.courselist.length>0"
                      >
                        <tr v-for="li in dropcourse.courselist">
                          <td style="width:2.3rem;" align="center">{{li.courseName}}</td>
                          <td style="width:2.3rem;" align="center">{{li.firstTime}}</td>
                          <td style="width:2.3rem;" align="center">{{li.useCourseHour||0}}</td>
                          <td style="width:2.3rem;" align="center">{{li.refundDate}}</td>
                        </tr>
                      </tbody>
                      <tbody v-else>
                        <tr>
                          <td colspan="4" align="center">暂无数据</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </el-row>
              </div>
            </div>
          </div>
          <div class="line"></div>
          <div class="bottomPanel">
            <el-row style="margin-top:.18rem;">
              <div class="trailrecordbox" style="margin-top:.2rem;" v-if="trailrecordlist.length>0">
                <div class="title">
                  <span class="spantitle">试听记录</span>
                </div>
                <div class="recordlist">
                  <div class="tablecss">
                    <table style="width:100%;" cellpadding="0" cellspacing="0">
                      <thead>
                        <tr>
                          <th>序号</th>
                          <th>预约试听时间</th>
                          <th>试听课程</th>
                          <th>试听班级</th>
                          <th>是否试听</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr v-for="(li,index) in trailrecordlist" :key="index">
                          <td align="center">{{index+1}}</td>
                          <td align="center">{{li.startTime}}</td>
                          <td align="center">{{li.courseName}}</td>
                          <td align="center">{{li.className}}</td>
                          <td align="center">
                            <i v-if="li.trial" class="el-icon-check"></i>
                            <i v-else class="el-icon-close"></i>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
              <div class="buycoursebox" style="margin-top:.2rem;" v-if="courselist.length>0">
                <div class="title">
                  <span class="spantitle">报课记录</span>
                </div>
                <div class="recordlist">
                  <div class="tablecss">
                    <table style="width:100%;" cellpadding="0" cellspacing="0">
                      <thead>
                        <tr>
                          <th>序号</th>
                          <th>名称</th>
                          <th>购买数量</th>
                          <th>单位</th>
                          <th>合同额（RMB）</th>
                          <th>优惠</th>
                          <th>实际支付</th>
                          <th>状态</th>
                        </tr>
                      </thead>
                      <tbody v-if="courselist.length>0">
                        <tr v-for="li in courselist">
                          <td align="center">{{li.index}}</td>
                          <td align="center">
                            <span v-if="li.className">
                              {{li.className}}
                              <br />
                              {{li.courseName}}
                            </span>
                            <span v-else>{{li.courseName}}</span>
                          </td>
                          <td align="center">{{li.courseBuyNum||0}}</td>
                          <td align="center">
                            <span v-if="li.coursePackage&&li.coursePackage.chargeMode==3">
                              <span v-if="li.coursePackage.courseTimeMode==1">年</span>
                              <span v-else-if="li.coursePackage.courseTimeMode==2">半年</span>
                              <span v-else-if="li.coursePackage.courseTimeMode==3">季度</span>
                              <span v-else-if="li.coursePackage.courseTimeMode==4">月</span>
                              <span v-else-if="li.coursePackage.courseTimeMode==5">周</span>
                            </span>
                            <span v-else-if="li.courseType == 4">节</span>
                            <span v-else>课时</span>
                          </td>
                          <td align="center">{{li.courseMoney||0}}</td>
                          <td align="center">{{li.discountMoney}}</td>
                          <td v-if="li.courseMoney != li.discountMoney+li.realMoney">
                            <div style="display: flex;justify-content: center;align-items: center;">
                              <div>{{li.realMoney}}</div>
                              <div class="name_img_blend" :title="li.orderSignupEntity.remark"></div>
                            </div>
                          </td>
                          <td align="center" v-else>{{li.realMoney}}</td>
                          <td align="center">
                            <span v-if="li.courseStatus==1">待开课</span>
                            <span
                              v-else-if="li.courseStatus==2"
                              @click="CostDetails(li)"
                              style="cursor: pointer;"
                            >上课中</span>
                            <span
                              v-else-if="li.courseStatus==3"
                              @click="RefundDetails(li)"
                              style="cursor: pointer;"
                            >已退费</span>
                            <span v-else-if="li.courseStatus==4">已退课</span>
                            <span v-else-if="li.courseStatus==5">停课</span>
                            <span v-else-if="li.courseStatus==6">已结课</span>
                            <span v-else-if="li.courseStatus==7">转班</span>
                            <span v-else-if="li.courseStatus==8">退费中</span>
                          </td>
                        </tr>
                      </tbody>
                      <tbody v-else>
                        <tr>
                          <td colspan="11" align="center">暂无数据</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
              <div class="buyproductbox" style="margin-top:.2rem;" v-if="productlist.length>0">
                <div class="title">
                  <span class="spantitle">购买商品记录</span>
                </div>
                <div class="recordlist">
                  <div class="tablecss">
                    <table style="width:100%;" cellpadding="0" cellspacing="0">
                      <thead>
                        <tr>
                          <th>序号</th>
                          <th>商品名称</th>
                          <th>单价</th>
                          <th>购买数量</th>
                          <th>总金额</th>
                          <th>实际金额</th>
                          <th>状态</th>
                        </tr>
                      </thead>
                      <tbody v-if="productlist.length>0">
                        <tr v-for="li in productlist">
                          <td align="center">{{li.index}}</td>
                          <td align="center">
                            <span>{{li.goodsName}}</span>
                          </td>
                          <td align="center">{{li.goodsOneMoney||0}}</td>
                          <td align="center">{{li.goodsNum||0}}</td>
                          <td align="center">{{li.totalMoney||0}}</td>
                          <td align="center">{{li.realMoney||0}}</td>
                          <td align="center">
                            <span v-if="li.courseStatus==2">正常</span>
                            <span v-else-if="li.courseStatus==3">已退费</span>
                          </td>
                        </tr>
                      </tbody>
                      <tbody v-else>
                        <tr>
                          <td colspan="11" align="center">暂无数据</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
              <div class="subscriptionRecordBox" style="margin-top:.2rem;" v-if="orderrecordlist.length>0">
                <div class="title">
                  <span class="spantitle">订金支付记录</span>
                </div>
                <div class="recordlist">
                  <div class="tablecss">
                    <table style="width:100%;" cellpadding="0" cellspacing="0">
                      <thead>
                        <tr>
                          <th>序号</th>
                          <th>支付日期</th>
                          <th>订金金额</th>
                          <th>实际支付</th>
                          <th>使用状态</th>
                        </tr>
                      </thead>
                      <tbody v-if="orderrecordlist.length>0">
                        <tr v-for="li in orderrecordlist">
                          <td align="center">{{li.index}}</td>
                          <td align="center">
                            <span>{{li.createTime}}</span>
                          </td>
                          <td align="center">{{li.earnestMoney||0}}</td>
                          <td align="center">{{li.realMoney||0}}</td>
                          <td align="center">
                            <span v-if="li.useEarnestMoney==0">未使用</span>
                            <span v-else-if="li.useEarnestMoney==1">已使用</span>
                          </td>
                        </tr>
                      </tbody>
                      <tbody v-else>
                        <tr>
                          <td colspan="11" align="center">暂无数据</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
               <div class="mealRecordBox" style="margin-top:.2rem;" v-if="mealrecordList.length>0">
                <div class="title">
                  <span class="spantitle">餐费购买记录</span>
                </div>
                <div class="recordlist">
                  <div class="tablecss">
                    <table style="width:100%;" cellpadding="0" cellspacing="0">
                      <thead>
                        <tr>
                          <th>序号</th>
                          <th>餐费名称</th>
                          <th>单价</th>
                          <th>购买数量</th>
                          <th>总金额</th>
                          <th>实际支付</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr v-for="(li,index) in mealrecordList" :key="index">
                          <td align="center">{{index+1}}</td>
                          <td align="center">{{li.mealsName}}</td>
                          <td align="center">￥{{li.price}}</td>
                          <td align="center">{{li.mealsNum}}</td>
                          <td align="center">￥{{li.totalMoney}}</td>
                          <td align="center">￥{{li.realMoney}}</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </el-row>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      class="chargespopup"
      :title="moneyDetailsPopup.title"
      :visible.sync="moneyDetailsPopup.visible"
      :center="moneyDetailsPopup.operationType==2"
    >
      <chargespopup
        ref="chargespopup"
        :chargespopup="moneyDetailsPopup.data"
        @hideMe="hideChargesPopup"
      ></chargespopup>
    </el-dialog>
    <el-dialog
      class="chargespopup"
      :title="moneyDetailsPopup1.title"
      :visible.sync="moneyDetailsPopup1.visible"
      :center="moneyDetailsPopup1.operationType==2"
    >
      <chargespopup
        ref="chargespopup"
        :chargespopup="moneyDetailsPopup1.data"
        @hideMe="hideChargesPopup1"
      ></chargespopup>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex"; //先要引入
import chargespopup from "../../processing_center/common/chargespopup";
let vm;
export default {
  components: {
    chargespopup
  },
  props: ["studentdetailprop"],
  data() {
    return {
      //studentinfo:this.studentdetailprop,//获取父组件传过来的对象值
      modalclose: false,
      RefundInfo: null,
      CourseCostInfo: null,
      Refund: false,
      Cost: false,
      moneyDetailsPopup: {
        visible: false,
        title: "费用详情",
        data: null,
        operationType: 0
      },
      moneyDetailsPopup1: {
        visible: false,
        title: "费用详情",
        data: null,
        operationType: 0
      },
      courseDedeail: [],
      finishShow: false, //已结课
      waitShow: false, //待开课
      attendShow: true, //上课中
      dropShow: false //已退课
    };
  },
  methods: {
    /**
     * 关闭弹框
     */
    handleClose() {
      // console.log(this.studentdetailprop)

      this.finishShow = false; //已结课
      this.waitShow = false; //待开课
      this.attendShow = true; //上课中
      this.dropShow = false; //已退课
      this.$refs.finishCourse.classList.remove("courseTypeActive");
      this.$refs.dropCourse.classList.remove("courseTypeActive");
      this.$refs.attendCourse.classList.add("courseTypeActive");
      this.$refs.waitCourse.classList.remove("courseTypeActive");
      this.$store.dispatch("studentmanage/hidestudetailsPanel");
    },
    handleClose2(done) {
      done();
    },
    handleClose3(done) {
      done();
    },
    /**隐藏收退费详情（审核）弹窗 */
    hideChargesPopup: function() {
      this.moneyDetailsPopup.visible = false;
    },
    /**隐藏收退费详情（审核）弹窗 */
    hideChargesPopup1: function() {
      this.moneyDetailsPopup1.visible = false;
    },
    getFieldsNameInChargesPopup1(type) {
      let fields = {
        title2: "",
        studentInfo: {},
        tableObj: {},
        otherIfo: {}
      };
      switch (type) {
        case "报名退费": {
          fields.title2 = "课程退费详情";
          fields.studentInfo["row1_clo4"] = "退款时间：";
          fields.studentInfo["row2_clo1"] = "收款人：";
          fields.studentInfo["row2_clo2"] = "收款人电话：";
          fields.tableObj["row1"] = "应退总计：";
          fields.tableObj["row2"] = "实际退款：";
          fields.tableObj["row3"] = "手动修改退费价格：";
          fields.otherIfo["row1"] = "退款方式：";
          fields.otherIfo["row2"] = "跟单人：";
          fields.otherIfo["row3"] = "退款人：";
          fields.otherIfo["row4"] = "退费原因：";
          break;
        }
      }
      return fields;
    },
    getFieldsNameInChargesPopup(type) {
      let fields = {
        title2: "",
        studentInfo: {},
        tableObj: {},
        otherIfo: {}
      };
      switch (type) {
        case "报名收费": {
          fields.title2 = "报名详情";
          fields.studentInfo["row1_clo4"] = "报名缴费时间：";
          fields.studentInfo["row2_clo1"] = "合同号：";
          fields.studentInfo["row2_clo2"] = "";
          fields.tableObj["row1"] = "应收总计：";
          fields.tableObj["row2"] = "实际收款：";
          fields.tableObj["row3"] = "订金抵扣：";
          fields.otherIfo["row1"] = "缴费方式：";
          fields.otherIfo["row2"] = "跟单人：";
          fields.otherIfo["row3"] = "收款人：";
          fields.otherIfo["row4"] = "备注：";
          break;
        }
      }
      return fields;
    },
    matchCourseTimeMode(value) {
      let dict = tool.getItem(lsKey.dict, true);
      let course_time_mode = dict.course_time_mode;
      for (let j = 0; j < course_time_mode.length; j++) {
        if (value == course_time_mode[j].value) {
          return course_time_mode[j].name;
        }
      }
    },
    /**显示收费、退费管理弹窗 */
    showChargesPopup: function(type, data, operationType) {
      if (!data) return;
      if (!data.signupCourseData) data.signupCourseData = [];
      if (!data.signupGoodsData) data.signupGoodsData = [];
      this.moneyDetailsPopup.operationType = operationType;
      if (operationType == 1) {
        this.moneyDetailsPopup.title = "费用详情";
      } else if (operationType == 2) {
        this.moneyDetailsPopup.title = "收费审核";
      }
      let fields = this.getFieldsNameInChargesPopup(type);

      let match = {
        2: "现金收款",
        3: "微信收款",
        4: "支付宝收款",
        1: "银联收款"
      };

      let param = {
        //收退费类型
        moneyType: type,
        //操作：1-查看/2-审核
        operationType: operationType,
        title: {
          row1: "学员信息",
          row2: fields.title2
        },
        studentInfo: {
          row1_clo1: {
            name: "学员姓名：",
            value: data.studentName
          },
          row1_clo2: {
            name: "联系人：",
            value: data.parentName
          },
          row1_clo3: {
            name: "联系电话：",
            value: data.studentPhone
          },
          row1_clo4: {
            name: fields.studentInfo.row1_clo4,
            value: data.createTime
          },
          row2_clo1: {
            name: fields.studentInfo.row2_clo1,
            value: data.receiptNo || data.orderNo
          },
          row2_clo2: {
            visible: false,
            name: fields.studentInfo.row2_clo2,
            value: ""
          }
        },
        tableObj: {
          type: type,
          statistics: {
            row1: {
              name: fields.tableObj.row1,
              value:
                data.realMoney +
                Number(data.discount) +
                Number(data.signUpUseEarnestMoney) //应收总计
            },
            row2: {
              name: fields.tableObj.row2,
              value: data.realMoney //实际收款
            },
            row3: {
              visible: Number(data.signUpUseEarnestMoney) > 0 ? true : false,
              name: fields.tableObj.row3,
              value: data.signUpUseEarnestMoney //定金抵扣
            }
          },
          table: {
            thead: [],
            tbody: []
          }
        },
        otherIfo: {
          row1: {
            name: fields.otherIfo.row1,
            value: match[data.payMode] || ""
          },
          row2: {
            name: fields.otherIfo.row2,
            value: data.executeUserName
          },
          row3: {
            name: fields.otherIfo.row3,
            value: data.createUserName
          },
          row4: {
            name: fields.otherIfo.row4,
            value: data.remark
          },
          row5: {
            name: "订单号：",
            value: ""
          },
          row6: {
            name: "第三方订单号：",
            value: ""
          },
          row7: {
            name: "订单状态：",
            value: "已入账"
          }
        }
      };
      if (type == "报名收费") {
        // param.studentInfo['row1_clo4']['value']=data.orderSignupEntity.orderTime;
        param.otherIfo["row5"].value = data.orderSigupId; //订单号
        param.otherIfo["row6"].value = data.payOrderNo; //第三方订单号

        let statu8 = "";
        if (data.checkshow) statu8 = "待审核";
        else if (data.payshow) statu8 = "待支付";
        else statu8 = "已入账";
        param.otherIfo.row7.value = statu8;

        param.tableObj.table.thead = [
          {
            propName: "name",
            labelNmae: "名称"
          },
          {
            propName: "totalPrice",
            labelNmae: "总价"
          },
          {
            propName: "unitPrice",
            labelNmae: "单价"
          },
          {
            propName: "unit",
            labelNmae: "单位"
          },
          {
            propName: "count",
            labelNmae: "购买数量"
          },
          {
            propName: "totalMoney",
            labelNmae: "合计金额"
          },
          {
            propName: "discount",
            labelNmae: "优惠"
          },
          {
            propName: "receivable",
            labelNmae: "已收款"
          }
        ];
        param.tableObj.table.tbody = [];
        console.log(JSON.stringify(data));
        for (let i = 0; i < data.signupCourseData.length; i++) {
          let row = data.signupCourseData[i];
          let price = (row.courseMoney / row.courseHour).toFixed(2);
          price = isNaN(price) ? row.courseMoney : price;
          let unit = "课时";
          if (!row.coursePackage) {
            unit = "";
          } else if (row.coursePackage.chargeMode == 3) {
            unit = this.matchCourseTimeMode(row.coursePackage.courseTimeMode);
          }
          param.tableObj.table.tbody.push({
            classmode: "课程",
            name:
              (row.courseName ? row.courseName + "\n" : "") +
              (row.className || ""),
            totalPrice: "￥" + (row.courseMoney || 0),
            unitPrice: "￥" + (price || 0),
            unit: unit,
            count: row.courseHour,
            totalMoney: "￥" + (row.courseMoney || 0),
            discount: "￥" + (row.discountMoney || 0),
            receivable: "￥" + (row.realMoney || 0)
          });
        }
        for (let i = 0; i < data.signupGoodsData.length; i++) {
          let row = data.signupGoodsData[i];
          param.tableObj.table.tbody.push({
            classmode: "商品",
            name: row.goodsName,
            totalPrice: "￥" + row.goodsOneMoney * row.goodsNum,
            unitPrice: "￥" + (row.goodsOneMoney || 0),
            unit: "个",
            count: row.goodsNum,
            totalMoney: "￥" + (row.totalMoney || 0),
            discount: "￥0",
            receivable: "￥" + (row.realMoney || 0)
          });
        }
      }

      if (!this.moneyDetailsPopup.data) {
        this.moneyDetailsPopup.data = param;
      } else {
        this.$refs.chargespopup.updateByData(param);
      }
    },
    /**显示收费、退费管理弹窗 */
    showChargesPopup1: function(type, data, operationType) {
      if (!data) return;
      if (!data.refundCourseData) data.refundCourseData = [];
      this.moneyDetailsPopup1.operationType = operationType;
      if (operationType == 1) {
        this.moneyDetailsPopup1.title = "退费详情";
      } else if (operationType == 2) {
        this.moneyDetailsPopup1.title = "退费审核";
      }
      let fields = this.getFieldsNameInChargesPopup1(type);
      let match = {
        2: "现金退款",
        3: "微信退款",
        4: "支付宝退款",
        1: "银联退款",
        5: "POS机退款",
        100: "原路返回"
      };
      let param = {
        //收退费类型
        moneyType: type,
        //操作：1-查看/2-审核
        operationType: operationType,
        title: {
          row1: "学员信息",
          row2: fields.title2
        },
        studentInfo: {
          row1_clo1: {
            name: "学员姓名：",
            value: data.studentName
          },
          row1_clo2: {
            name: "联系人：",
            value: data.parentName
          },
          row1_clo3: {
            name: "联系电话：",
            value: data.studentPhone
          },
          row1_clo4: {
            name: fields.studentInfo.row1_clo4,
            value: data.createTime
          },
          row2_clo1: {
            name: fields.studentInfo.row2_clo1,
            value: data.payeeName
          },
          row2_clo2: {
            visible: true,
            name: fields.studentInfo.row2_clo2,
            value: data.payeeTel
          }
        },
        tableObj: {
          type: type,
          statistics: {
            row1: {
              name: fields.tableObj.row1,
              value: ""
            },
            row2: {
              name: fields.tableObj.row2,
              value: data.realMoney
            },
            row3: {
              visible: false,
              name: fields.tableObj.row3,
              value: "测试"
            }
          },
          table: {
            thead: [],
            tbody: []
          }
        },
        otherIfo: {
          row1: {
            name: fields.otherIfo.row1,
            value: match[data.payMode] || ""
          },
          row2: {
            name: fields.otherIfo.row2,
            value: data.executeUserName
          },
          row3: {
            name: fields.otherIfo.row3,
            value: data.createUserName
          },
          row4: {
            name: fields.otherIfo.row4,
            value: data.remark
          },
          row5: {
            name: "订单号：",
            value: "" //data.orderRefundEntity.orderRefundId
          },
          row6: {
            name: "第三方订单号：",
            value: "" //data.orderRefundEntity.payOrderNo
          },
          row7: {
            name: "订单状态：",
            value: "已退款"
          }
        }
      };
      if (type == "报名退费") {
        if (data.refundCourseData) {
          param.otherIfo["row5"].value = data.refundCourseData[0].orderRefundId; //订单号
          param.otherIfo["row6"].value = data.refundCourseData[0].payOrderNo; //第三方订单号
        }
        param.tableObj.table.thead = [
          { propName: "clo1", labelNmae: "名称" },
          { propName: "clo2", labelNmae: "收费模式" },
          { propName: "clo3", labelNmae: "购买课时" },
          { propName: "clo4", labelNmae: "课程单价" },
          { propName: "clo5", labelNmae: "课程总价" },
          { propName: "clo6", labelNmae: "实际支付" },
          { propName: "clo7", labelNmae: "已上课时" },
          { propName: "clo8", labelNmae: "课耗" },
          { propName: "clo9", labelNmae: "剩余课时" },
          { propName: "clo10", labelNmae: "剩余课程费用" },
          { propName: "clo11", labelNmae: "应退费" }
        ];
        param.tableObj.table.tbody = [];
        let sum = 0;
        for (let i = 0; i < data.refundCourseData.length; i++) {
          let row = data.refundCourseData[i];
          param.tableObj.table.tbody.push({
            classmode: "课程",
            clo1: row.courseName,
            clo2: row.chargeModeName,
            clo3: row.buyHour,
            clo4: "￥" + row.courseOnePrice,
            clo5: "￥" + row.courseTotalPrice,
            clo6: "￥" + row.realMoney /*realPayMoney*/,
            clo7: row.useClassHour,
            clo8: "￥" + row.useMoney,
            clo9: row.surplusClassHour,
            clo10: "￥" + row.surplusMoney,
            clo11: "￥" + row.refundMeoey
          });
          sum += row.refundMeoey;
        }
        param.tableObj.statistics.row1.value = sum;
      }

      if (!this.moneyDetailsPopup1.data) {
        this.moneyDetailsPopup1.data = param;
      } else {
        this.$refs.chargespopup.updateByData(param);
      }
    },
    /**
     * 费用详情
     */
    CostDetails(row) {
      let courseMode = row.courseMode;
      let paras = { studentCourseId: row.studentCourseId };
      api.getCourseCost(paras).then(function(data) {
        console.log(data);
        vm.CourseCostInfo = data.info[0];
        vm.CourseCostInfo.courseMode = courseMode;
        // vm.Cost = true;
        let parasaa = {
          fiRecordId: vm.CourseCostInfo.accountRecordEntityList[0].fiRecordId,
          billMode: vm.CourseCostInfo.accountRecordEntityList[0].billMode,
          billId: vm.CourseCostInfo.accountRecordEntityList[0].billId,
          realMoney: vm.CourseCostInfo.realMoney,
          incomePayMode:
            vm.CourseCostInfo.accountRecordEntityList[0].incomePayMode,
          payMode: vm.CourseCostInfo.payMode,
          receiptNo: vm.CourseCostInfo.receiptNo,
          remark: vm.CourseCostInfo.remark,
          campusId: vm.CourseCostInfo.campusId,
          createUserId: vm.CourseCostInfo.createUserId,
          createUserName: vm.CourseCostInfo.createUserName,
          createTime: vm.CourseCostInfo.createTime,
          updateTime: vm.CourseCostInfo.updateTime,
          updateUserId: vm.CourseCostInfo.updateUserId,
          isDelete: vm.CourseCostInfo.isDelete,
          studentNo: vm.CourseCostInfo.studentEntity.studentNo,
          studentName: vm.CourseCostInfo.studentEntity.realName,
          className: vm.CourseCostInfo.courseformData[0].className,
          courseName: vm.CourseCostInfo.courseformData[0].courseName,
          studentPhone:
            vm.CourseCostInfo.studentEntity.studentParentEntityList[0].phone,
          executeUserName: vm.CourseCostInfo.executeUserName,
          orderNo: vm.CourseCostInfo.orderNo,
          discount: vm.CourseCostInfo.discount,
          signUpRealMoney:
            vm.CourseCostInfo.accountRecordEntityList[0].signUpRealMoney,
          signUpDate: vm.CourseCostInfo.accountRecordEntityList[0].signUpDate,
          signUpUseEarnestMoney:
            vm.CourseCostInfo.accountRecordEntityList[0].signUpUseEarnestMoney,
          billTypeName:
            vm.CourseCostInfo.accountRecordEntityList[0].billTypeName,
          parentName:
            vm.CourseCostInfo.studentEntity.studentParentEntityList[0]
              .parentName,
          payeeName: vm.CourseCostInfo.accountRecordEntityList[0].payeeName,
          payeeTel: vm.CourseCostInfo.accountRecordEntityList[0].payeeTel,
          refundRemark:
            vm.CourseCostInfo.accountRecordEntityList[0].refundRemark,
          orderSigupId: vm.CourseCostInfo.orderSigupId,
          orderSignupEntity:
            vm.CourseCostInfo.accountRecordEntityList[0].orderSignupEntity,
          orderRefundEntity:
            vm.CourseCostInfo.accountRecordEntityList[0].orderRefundEntity,
          signupCourseData: vm.CourseCostInfo.courseformData,
          signupGoodsData:
            vm.CourseCostInfo.accountRecordEntityList[0].signupGoodsData,
          signupMealsData:
            vm.CourseCostInfo.accountRecordEntityList[0].signupMealsData,
          refundCourseData:
            vm.CourseCostInfo.accountRecordEntityList[0].refundCourseData,
          refundGoodsData:
            vm.CourseCostInfo.accountRecordEntityList[0].refundGoodsData,
          refundMealsData:
            vm.CourseCostInfo.accountRecordEntityList[0].refundMealsData
        };
        vm.moneyDetailsPopup.visible = true;
        // debugger
        vm.showChargesPopup("报名收费", parasaa, 1);
      });
    },
    /**
     * 退费详情
     */
    RefundDetails(row) {
      let courseMode = row.courseMode;
      let paras = { studentCourseId: row.studentCourseId };
      api.getRefundInfo(paras).then(function(data) {
        console.log(data);
        vm.RefundInfo = data.info[0];
        // vm.RefundInfo.orderRefundCourseEntityList[0].courseMode = courseMode;
        let parasaa = {
          fiRecordId: vm.RefundInfo.fiRecordId,
          billMode: vm.RefundInfo.billMode,
          billId: vm.RefundInfo.billId,
          realMoney: vm.RefundInfo.realMoney,
          incomePayMode: vm.RefundInfo.incomePayMode,
          payMode: vm.RefundInfo.payMode,
          receiptNo: vm.RefundInfo.receiptNo,
          remark: vm.RefundInfo.remark,
          campusId: vm.RefundInfo.campusId,
          createUserId: vm.RefundInfo.createUserId,
          createUserName: vm.RefundInfo.createUserName,
          createTime: vm.RefundInfo.createTime,
          updateTime: vm.RefundInfo.updateTime,
          updateUserId: vm.RefundInfo.updateUserId,
          isDelete: vm.RefundInfo.isDelete,
          studentNo: vm.RefundInfo.studentNo,
          studentName: vm.studentdetailprop.realName,
          className: vm.RefundInfo.className,
          courseName: vm.RefundInfo.courseName,
          studentPhone: vm.studentdetailprop.studentParentEntityList[0].phone,
          executeUserName: vm.RefundInfo.executeUserName,
          orderNo: vm.RefundInfo.orderNo,
          orderRefundId: vm.RefundInfo.orderRefundId,
          discount: vm.RefundInfo.discount,
          signUpRealMoney: vm.RefundInfo.signUpRealMoney,
          signUpDate: vm.RefundInfo.signUpDate,
          signUpUseEarnestMoney: vm.RefundInfo.signUpUseEarnestMoney,
          billTypeName: vm.RefundInfo.billTypeName,
          parentName: vm.RefundInfo.parentName,
          payeeName: vm.RefundInfo.payeeName,
          payeeTel: vm.RefundInfo.payeeTel,
          refundRemark: vm.RefundInfo.refundRemark,
          orderSigupId: vm.RefundInfo.orderSigupId,
          orderSignupEntity: vm.RefundInfo.orderSignupEntity,
          orderRefundEntity: vm.RefundInfo.orderRefundEntity,
          signupCourseData: vm.RefundInfo.accountRecordEntityList,
          signupGoodsData: vm.RefundInfo.signupGoodsData,
          signupMealsData: vm.RefundInfo.signupMealsData,
          refundCourseData: vm.RefundInfo.refundCourseData,
          refundGoodsData: vm.RefundInfo.refundGoodsData,
          refundMealsData: vm.RefundInfo.refundMealsData
        };
        vm.moneyDetailsPopup1.visible = true;
        // debugger
        vm.showChargesPopup1("报名退费", parasaa, 1);
      });
    },
    /**
     * 已结课
     */
    finishCourse() {
      //console.log(this.finishcourse.courselist)
      this.$refs.finishCourse.classList.add("courseTypeActive");
      this.$refs.dropCourse.classList.remove("courseTypeActive");
      this.$refs.attendCourse.classList.remove("courseTypeActive");
      this.$refs.waitCourse.classList.remove("courseTypeActive");
      //this.courseDedeail=this.finishcourse.courselist;
      this.finishShow = true; //已结课
      this.waitShow = false; //待开课
      this.attendShow = false; //上课中
      this.dropShow = false; //已退课
    },
    /**
     * 已退课
     */
    dropCourse() {
      this.$refs.finishCourse.classList.remove("courseTypeActive");
      this.$refs.dropCourse.classList.add("courseTypeActive");
      this.$refs.attendCourse.classList.remove("courseTypeActive");
      this.$refs.waitCourse.classList.remove("courseTypeActive");
      //this.courseDedeail=this.dropcourse.courselist;
      //console.log(this.courseDedeail)
      this.finishShow = false; //已结课
      this.waitShow = false; //待开课
      this.attendShow = false; //上课中
      this.dropShow = true; //已退课
    },
    /**
     * 上课中
     */
    attendCourse() {
      this.$refs.finishCourse.classList.remove("courseTypeActive");
      this.$refs.dropCourse.classList.remove("courseTypeActive");
      this.$refs.attendCourse.classList.add("courseTypeActive");
      this.$refs.waitCourse.classList.remove("courseTypeActive");
      //this.courseDedeail=this.attendcourse.courselist;
      this.finishShow = false; //已结课
      this.waitShow = false; //待开课
      this.attendShow = true; //上课中
      this.dropShow = false; //已退课
    },
    /**
     * 待开课
     */
    waitCourse() {
      //console.log(this.courselist)
      this.$refs.finishCourse.classList.remove("courseTypeActive");
      this.$refs.dropCourse.classList.remove("courseTypeActive");
      this.$refs.attendCourse.classList.remove("courseTypeActive");
      this.$refs.waitCourse.classList.add("courseTypeActive");
      //this.courseDedeail=this.waitcourse.courselist;
      this.finishShow = false; //已结课
      this.waitShow = true; //待开课
      this.attendShow = false; //上课中
      this.dropShow = false; //已退课
    }
  },
  computed: {
    ...mapState({
      isShow: state => state.studentmanage.stuDialog
    }),
    ...mapGetters("studentmanage", {
      courselist: "getBuyrecordeList",
      productlist: "getBuyproductList",
      orderrecordlist: "getOrderrecordList",
      trailrecordlist: "getTrailrecordList",
      mealrecordList: "getMealrecordList",
    }),
    finishcourse: function() {
      //已结课

      let dataObj = { finishnum: 0, courselist: [] };
      let courses = this.studentdetailprop.courseList || [];
      // console.log(courses)
      if (courses == null) return;
      for (let i = 0; i < courses.length; i++) {
        if (courses[i].courseStatus == 6) {
          dataObj.finishnum++;
          dataObj.courselist.push(courses[i]);
        }
      }
      return dataObj;
    },
    dropcourse: function() {
      //已退课

      let dataObj = { finishnum: 0, courselist: [] };
      let courses = this.studentdetailprop.courseList || [];

      for (let i = 0; i < courses.length; i++) {
        if (courses[i].courseStatus == 3 || courses[i].courseStatus == 4) {
          dataObj.finishnum++;
          dataObj.courselist.push(courses[i]);
        }
      }
      return dataObj;
    },
    attendcourse: function() {
      //上课中

      let dataObj = { finishnum: 0, courselist: [] };
      let courses = this.studentdetailprop.courseList || [];

      for (let i = 0; i < courses.length; i++) {
        if (courses[i].courseStatus == 2) {
          dataObj.finishnum++;
          dataObj.courselist.push(courses[i]);
        }
      }
      // this.courseDedeail=dataObj.courselist;

      return dataObj;
    },
    waitcourse: function() {
      //待上课

      let dataObj = { finishnum: 0, courselist: [] };
      let courses = this.studentdetailprop.courseList || [];

      for (let i = 0; i < courses.length; i++) {
        if (courses[i].courseStatus == 1) {
          dataObj.finishnum++;
          dataObj.courselist.push(courses[i]);
        }
      }

      return dataObj;
    },
    //应退款
    returnMoney: function() {
      let money = 0;
      if (this.RefundInfo != null) {
        money = this.RefundInfo.orderRefundCourseEntityList[0].refundMeoey;
      }
      return money;
    },
    //实际退款
    realMoney: function() {
      let money = 0;
      if (this.RefundInfo != null) {
        money = this.RefundInfo.relMoney;
      }
      return money;
    },
    //课程费用
    CostInfo: function() {
      if (vm.CourseCostInfo != null) {
        return vm.CourseCostInfo.courseformData[0];
      }
    },
    //课程费用付费信息
    PayInfo: function() {
      if (vm.CourseCostInfo != null) {
        return vm.CourseCostInfo.accountRecordEntityList[0];
      }
    },
    //学员信息
    studentInfo: function() {
      if (vm.CourseCostInfo != null) {
        if (
          vm.CourseCostInfo.studentEntity.studentParentEntityList != null &&
          vm.CourseCostInfo.studentEntity.studentParentEntityList.length > 0
        ) {
          vm.CourseCostInfo.studentEntity.parentName =
            vm.CourseCostInfo.studentEntity.studentParentEntityList[0]
              .parentName || "";
          vm.CourseCostInfo.studentEntity.phone =
            vm.CourseCostInfo.studentEntity.studentParentEntityList[0].phone ||
            "";
        } else {
          vm.CourseCostInfo.studentEntity.parentName = "";
          vm.CourseCostInfo.studentEntity.phone = "";
        }

        return vm.CourseCostInfo.studentEntity;
      }
    }
  },
  mounted() {
    vm = this;
    console.log(vm.courselist);
  }
};
</script>

<style lang="scss">
@import "@/style/module/utils.scss";
.studentcontainer {
  /**学员详细信息弹出框**/

  .studetailinfo {
    width: 100%;
    max-height: 50rem;
    padding: 0 0.31rem 0.3rem 0.31rem;
    .topPanel {
      width: 100%;
      height: 2.4rem;
      .leftStudentInfo {
        width: 2rem;
        height: 100%;
        background: #f8f8f8;
        float: left;
        border: 1px solid $bordercolor;
        @media screen and (max-width: 1366px) {
          width: 2.4rem;
        }
        .headPic {
          width: 1.12rem;
          height: 1.12rem;
          position: relative;
          top: 0.06rem;
          left: 50%;
          margin-left: -0.56rem;
          img {
            width: 100%;
            height: 1.12rem;
            /*width:1.12rem;
						    height:1.12rem;*/
            border-radius: 100%;
          }
        }
        .studentName {
          height: 0.18rem;
          width: 100%;
          top: 0.12rem;
          line-height: 0.18rem;
          font-size: 0.18rem;
          text-align: center;
          position: relative;
          font-weight: bold;
        }
        .studentAge {
          height: 0.16rem;
          width: 100%;
          top: 0.16rem;
          color: #666666;
          line-height: 0.16rem;
          font-size: 0.16rem;
          text-align: center;
          position: relative;
        }
        .studentParent {
          height: 0.6rem;
          width: 100%;
          position: relative;
          top: 0.3rem;
          padding: 0 0.1rem;
          .item {
            width: 100%;
            height: 0.2rem;
            line-height: 0.2rem;
          }
        }
      }
      .rightCourseInfo {
        width: 9.2rem;
        height: 100%;
        margin-left: 0.22rem;
        float: left;
        @media screen and (max-width: 1366px) {
          width: 8.8rem;
        }
        .courseTypeInfo {
          width: 100%;
          height: 1.32rem;
          background: #f8f8f8;
          display: flex;
          flex-wrap: nowrap;
          border: 1px solid $bordercolor;
          .courseType {
            display: inline-flex;
            justify-content: center;
            flex-wrap: wrap;
            width: 25%;
            height: 100%;
            cursor: pointer;
            .coursetypename {
              width: 100%;
              height: 0.18rem;
              line-height: 0.18rem;
              text-align: center;
              font-size: 0.18rem;
              margin-top: 0.25rem;
            }
            .coursenum {
              width: 100%;
              height: 0.36rem;
              line-height: 0.36rem;
              font-size: 0.36rem;
              text-align: center;
              margin-top: 0.24rem;
            }
          }
          .courseTypeActive {
            background-image: url("~@/assets/img/education_manage/bgcourse.png");
            width: 25%;
            height: 1.3rem;
            color: #ffffff;
          }
        }
        .courseInfo {
          width: 100%;
          height: 1.08rem;
          border: 1px solid $bordercolor;
          border-top: none;
        }
      }
    }
    .line {
      height: 1px;
      background: $partinglineColor;
      width: 100%;
      margin-top: 0.16rem;
    }
    .bottomPanel {
      width: 100%;
      max-height: 40rem;
    }
  }
  /**退费详情**/
  .RefundInfo {
    width: 100%;
    max-height: 9rem;
    padding: 0 0.31rem 0.3rem 0.31rem;
    .studentInfo {
      width: 100%;
      height: 0.8rem;
      .title {
        width: 100%;
        height: 0.18rem;
        line-height: 0.18rem;
      }
      .item {
        width: 100%;
        height: 0.18rem;
        margin-top: 0.1rem;
        .itemdetail {
          width: 25%;
          height: 0.18rem;
          line-height: 0.18rem;
          float: left;
        }
      }
    }
    .refundInfo {
      width: 100%;
      height: 0.8rem;
      margin-top: 0.2rem;
      .title {
        width: 100%;
        height: 0.18rem;
        line-height: 0.18rem;
      }
      .refundlist {
        margin-top: 0.1rem;
        width: 100%;
        height: 1.08rem;
        overflow: auto;
      }
    }
    .totalRefund {
      height: 0.5rem;
      width: 100%;
      margin-top: 1rem;

      .returnmoney {
        height: 0.2rem;
        width: 100%;
        line-height: 0.2rem;
        font-size: 0.16rem;
        span {
          float: right;
        }
      }
      .realmoney {
        height: 0.3rem;
        width: 100%;
        line-height: 0.3rem;
        font-size: 0.2rem;
        span {
          float: right;
        }
      }
    }
    .line {
      height: 1px;
      width: 100%;
      background: $partinglineColor;
      margin: 0.3rem 0rem;
    }
    .otherinfo {
      width: 100%;
      height: 1.5rem;
      .item {
        height: 0.3rem;
        width: 100%;
        line-height: 0.3rem;
      }
    }
  }
  .CostInfo {
    width: 100%;
    max-height: 9rem;
    padding: 0 0.31rem 0.3rem 0.31rem;
    .studentInfo {
      width: 100%;
      height: 0.8rem;
      .title {
        width: 100%;
        height: 0.18rem;
        line-height: 0.18rem;
      }
      .item {
        width: 100%;
        height: 0.18rem;
        margin-top: 0.1rem;
        .itemdetail {
          width: 25%;
          height: 0.18rem;
          line-height: 0.18rem;
          float: left;
        }
      }
    }
    .refundInfo {
      width: 100%;
      height: 0.8rem;
      margin-top: 0.2rem;
      .title {
        width: 100%;
        height: 0.18rem;
        line-height: 0.18rem;
      }
      .refundlist {
        margin-top: 0.1rem;
        width: 100%;
        height: 1.08rem;
        overflow: auto;
      }
    }
    .totalRefund {
      height: 0.5rem;
      width: 100%;
      margin-top: 1rem;

      .returnmoney {
        height: 0.2rem;
        width: 100%;
        line-height: 0.2rem;
        font-size: 0.16rem;
        span {
          float: right;
        }
      }
      .realmoney {
        height: 0.3rem;
        width: 100%;
        line-height: 0.3rem;
        font-size: 0.2rem;
        span {
          float: right;
        }
      }
      .discount {
        height: 0.2rem;
        width: 100%;
        line-height: 0.2rem;
        font-size: 0.14rem;
        span {
          float: right;
        }
      }
    }
    .line {
      height: 1px;
      width: 100%;
      background: $partinglineColor;
      margin: 0.3rem 0rem;
    }
    .otherinfo {
      width: 100%;
      height: 1.5rem;
      .item {
        height: 0.3rem;
        width: 100%;
        line-height: 0.3rem;
      }
    }
  }
  .chargespopup {
    .el-dialog {
      width: 11.84rem !important;
      background-color: white !important;
      border-radius: 0.1rem !important;
      .el-dialog__header {
        .el-dialog__title {
          font-size: 0.22rem !important;
          color: #333333 !important;
          padding: 0rem 0.1rem 0rem 0.1rem;
          font-weight: bold;
        }
      }
      .el-dialog__body {
        font-size: 0.16rem !important;
        color: #666666 !important;
        padding: 0.2rem 0.3rem !important;
      }
    }
  }
  .name_img_blend {
    margin-left: 0.04rem;
    width: 0.16rem;
    height: 0.16rem;
    background-image: url(../../../assets/img/common/info.png);
  }
  /**自定义对话框标题样式**/
  .panel_title {
    padding: 0.23rem 0.31rem 0.23rem 0.31rem;
    font-size: 0.22rem;
    font-family: "microsoft yahei";
    color: #333333;
  }
  /**
		 * 自定义对话框样式
		 */
  .el-dialog-bg {
    background: #ffffff;
    width: 12.2rem;
    margin-top: 8vh !important;
    border-radius: 0.1rem;
    .el-dialog__header {
      padding: 0px;
    }
    .el-dialog__body {
      padding: 0px !important;
    }
    .el-dialog__footer {
      padding: 0.3rem;
      .footer-btn {
        width: 100%;
        text-align: center;
      }
    }
  }

  .el-dialog-bg2 {
    background: #ffffff;
    width: 12rem;
    margin-top: 8vh !important;
    border-radius: 0.1rem;
    .el-dialog__header {
      padding: 0px;
    }
    .el-dialog__body {
      padding: 0px !important;
    }
    .el-dialog__footer {
      padding: 0.3rem;
      .footer-btn {
        width: 100%;
        text-align: center;
      }
    }
  }
}
</style>